<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>提交采购订单</span>
          </div>
          <div class="save_button">
            <div v-if="reviewS && data.status !== 3" class="buttonBox">
              <el-button type="success" icon="el-icon-check" size="mini" @click="reviewSuccess">通过</el-button>
            </div>
            <div v-if="reviewB && data.status !== 3" class="buttonBox">
              <el-button type="danger" icon="el-icon-close" size="mini" @click="reviewBack">退回</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="save">保存</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-remove" size="mini" @click="confirmDel">删除</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="data" :inline="true" :rules="formRules">
            <el-input v-model="data.id" type="hidden" />
            <el-row :gutter="10">
              <el-col :xl="4" :lg="5" :md="7" :sm="8">
                <el-form-item prop="coding">
                  <div>编号</div>
                  <el-input v-model="data.coding" size="mini" :disabled="alreadyReview" />
                </el-form-item>
              </el-col>
              <el-col :xl="4" :lg="5" :md="7" :sm="8">
                <el-form-item prop="name">
                  <div>名称</div>
                  <el-input v-model="data.name" size="mini" :disabled="alreadyReview" />
                </el-form-item>
              </el-col>
              <el-col :xl="4" :lg="5" :md="7" :sm="8" hidden>
                <el-form-item prop="factory_id">
                  <div>所属工厂</div>
                  <v-select v-model="data.factory_id" action="factoryList" :disabled="alreadyReview" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="8">
                <el-form-item prop="admin_id">
                  <div>采购人员</div>
                  <v-select v-model="data.admin_id" :query="{category_id: 116}" :disabled="alreadyReview" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="8">
                <el-form-item prop="apply_admin_id">
                  <div>申请人员</div>
                  <v-select v-model="data.apply_admin_id" :query="{category_id: 117}" :disabled="alreadyReview" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="5" :md="6" :sm="8">
                <el-form-item prop="status">
                  <div>状态</div>
                  <el-select v-model="data.status" size="mini" disabled>
                    <el-option v-for="(item, index) in orderStatus" :key="index" :value="index" :label="item" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="6" :sm="8" hidden>
                <el-form-item prop="kind">
                  <div>类型</div>
                  <el-select v-model="data.kind" size="mini">
                    <el-option v-for="(item, index) in applyKind" :key="index" :value="index+1" :label="item" />
                  </el-select>
                </el-form-item>
              </el-col>
              <div v-if="data.verify_admin">
                <el-col :xl="3" :lg="4" :md="6" :sm="8">
                  <el-form-item>
                    <div>验证人员</div>
                    <el-input v-model="data.verify_admin.name" size="mini" disabled />
                  </el-form-item>
                </el-col>
                <el-col :xl="3" :lg="4" :md="6" :sm="8">
                  <el-form-item>
                    <div>验证时间</div>
                    <el-input v-model="data.verify_date" size="mini" disabled />
                  </el-form-item>
                </el-col>
              </div>
              <el-col :xl="3" :lg="5" :md="5" :sm="8">
                <el-form-item prop="sort">
                  <div>排序</div>
                  <el-input v-model="data.sort" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-tabs>
            <el-tab-pane label="详细">
              <el-table :data="list">
                <el-table-column label="采购物品" min-width="16%">
                  <template v-slot="scope">
                    {{ scope.row.tools.name }}-{{ scope.row.tools.spec }}
                  </template>
                </el-table-column>
                <el-table-column prop="providers.name" label="供应商" min-width="28%" />
                <el-table-column prop="number" label="数量" min-width="8%" />
                <el-table-column prop="price" label="单价 (¥)" min-width="8%" />
                <el-table-column prop="total_price" label="总价 (¥)" min-width="12%" />
                <el-table-column prop="datetime" label="交货日期" min-width="16%" />
                <el-table-column label="操作" min-width="8%">
                  <template v-slot="scope">
                    <div v-if="data.status === 0 || data.status === 2">
                      <el-button type="text" size="small" @click="remove(scope.row.id)">删除</el-button>
                    </div>
                    <div v-else>
                      <span>-</span>
                    </div>
                  </template>
                </el-table-column>
                <div v-if="data.status !== 1 && data.status !== 3" slot="append">
                  <el-form ref="append_form" :model="apply" inline class="hf_form append_other_admin" :rules="appendRules">
                    <el-row :gutter="10">
                      <el-col :span="4">
                        <el-form-item prop="part_id">
                          <v-select-s v-model="apply.part_id" action="toolList" :query="{add_field:'spec'}" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="7">
                        <el-form-item prop="provider_id">
                          <v-select v-model="apply.provider_id" action="providerList" :disabled="!apply.part_id" :query="{part_id:apply.part_id,kind:data.kind}" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="2">
                        <el-form-item prop="number">
                          <el-input v-model="apply.number" size="mini" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="2">
                        <el-form-item prop="price">
                          <el-input v-model="apply.price" size="mini" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="3">
                        <el-form-item>
                          <el-input v-model="apply.total_price" size="mini" disabled />
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-form-item prop="datetime">
                          <el-date-picker v-model="apply.datetime" type="date" value-format="yyyy-MM-dd" size="mini" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="2">
                        <el-form-item>
                          <el-button icon="el-icon-upload2" size="mini" @click="append" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="描述">
              <el-row :gutter="10">
                <el-col :span="4">
                  <div>
                    <span>创建时间日期</span>
                    <el-input v-model="data.create_time" placeholder="创建时间日期" class="mtb10" size="mini" disabled />
                  </div>
                  <div>
                    <span>创建人</span>
                    <el-input v-model="data.cr_admin.name" placeholder="创建人" class="mtb10" size="mini" disabled />
                  </div>
                  <div v-if="data.update_time">
                    <div>
                      <span>最近更新</span>
                      <el-input v-model="data.update_time" placeholder="最近更新" class="mtb10" size="mini" disabled />
                    </div>
                    <div>
                      <span>更新者</span>
                      <el-input v-model="data.up_admin.name" placeholder="更新者" class="mtb10" size="mini" disabled />
                    </div>
                  </div>
                </el-col>
                <el-col :span="20">
                  <Tinymce id="content" v-model="data.content" />
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import API from '@/api/tool/order'
import VSelect from '@/components/select'
import VSelectS from '@/components/select-search'
import { orderStatus, applyKind } from '@/utils/options'
import Tinymce from '@/components/Tinymce/index'
import { mapGetters } from 'vuex'
export default {
  inject: ['backUrl', 'delOne', 'update', 'appendParts', 'removeParts'],
  components: {
    VSelect,
    Tinymce,
    VSelectS
  },
  data() {
    return {
      data: {
        kind: 2,
        'cr_admin': {
          'name': ''
        },
        'verify_admin': {
          'name': ''
        }
      },
      list: [],
      apply: {},
      order: {},
      reviewS: false,
      reviewB: false,
      alreadyReview: false,
      orderStatus,
      applyKind,
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入采购单名称',
            trigger: 'blur'
          }
        ],
        factory_id: [
          {
            required: true,
            message: '请选择工厂',
            trigger: 'change'
          }
        ],
        admin_id: [
          {
            required: true,
            message: '请选择维护负责人',
            trigger: 'change'
          }
        ],
        apply_admin_id: [
          {
            required: true,
            message: '请选择申请人员',
            trigger: 'change'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      },
      appendRules: {
        purrqs_id: [
          {
            required: true,
            message: '请选择申请单',
            trigger: 'change'
          }
        ],
        part_id: [
          {
            required: true,
            message: '请选择工具',
            trigger: 'change'
          }
        ],
        provider_id: [
          {
            required: true,
            message: '请选择供应商',
            trigger: 'change'
          }
        ],
        number: [
          {
            required: true,
            message: '请填写数量',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '请填写价格',
            trigger: 'blur'
          }
        ],
        datetime: [
          {
            required: true,
            message: '请填写日期',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    const id = this.$route.params.id
    API.getOne(id).then(response => {
      if (response.data.error_code === 52404) {
        this.$alert('您请求的采购单不存在', '错误', {
          confirmButtonText: '确定',
          callback: () => {
            this.backUrl()
          }
        })
      }
      this.data = response.data
      this.list = response.data.order_part
      if (response.data.status === 1 || response.data.status === 3) {
        this.alreadyReview = true
      }
      // 部长审核
      const bz = [128, 16]
      const thisRole = this.roles[0]
      if (bz.includes(thisRole)) {
        if (response.data.status === 0 || response.data.status === 2) {
          this.reviewS = true
        }
        if (response.data.status !== 3 && response.data.status !== 4) {
          this.reviewB = true
        }
      }
    })
  },
  methods: {
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.update(API, thisData, thisForm)
    },
    append() {
      const thisForm = this.$refs.append_form
      const parts_data = {
        'kind': this.apply.kind,
        'purrqs_id': this.apply.purrqs_id,
        'part_id': this.apply.part_id,
        'provider_id': this.apply.provider_id,
        'number': this.apply.number,
        'price': this.apply.price,
        'datetime': this.apply.datetime,
        'order_id': this.$route.params.id
      }
      const errorCode = 52004
      const errorMessage = '该工具已存在'
      this.appendParts(API, thisForm, parts_data, errorCode, errorMessage)
    },
    remove(id) {
      const parts_data = {
        'id': id
      }
      this.removeParts(API, id, parts_data)
    },
    reviewSuccess() {
      const reviewData = {
        'status': 1,
        'content': this.data.content,
        'id': this.data.id
      }
      API.review(reviewData).then(response => {
        if (response.data.error_code === 1) {
          this.$message.success('审批！')
          this.backUrl()
        } else {
          this.$message.error(response.data.message)
        }
      })
    },
    reviewBack() {
      if (!this.data.content) {
        this.$message.error('请填写退回原因（在描述中填写）')
        return false
      }
      const reviewData = {
        'status': 2,
        'content': this.data.content,
        'id': this.data.id
      }
      API.review(reviewData).then(response => {
        if (response.data.error_code === 1) {
          this.$message.success('退回！')
          this.backUrl()
        } else {
          this.$message.error(response.data.message)
        }
      })
    },
    goBack() {
      this.goUrl('/tool/order')
    }
  }
}
</script>
